<template>
  <view class="payment-coupons">
    <!-- <cell :is-label="false" :border="false" v-if="!shop.phone"> -->
    <cell :is-label="false" :border="false">
      <button class="login-btn" type="default" open-type="getPhoneNumber"
        @getphonenumber="getPhone">授权查询美好生活可用券</button>
    </cell>
    <view class="margin-box" v-if="coupons.length > 0"></view>
    <cell :is-label="false" :border="false" v-if="coupons.length > 0">
      <view class="coupon-title">
        <text>用券</text>
        <text class="coupon-tip">(仅支持选择同一类的券码)</text>
      </view>
    </cell>
    <view class="" v-for="(coupon, couponIndex) in coupons" :key="couponIndex" v-show="coupon.couponList.length > 0">
      <cell :is-label="false" :border="openIndex != couponIndex">
        <view class="coupon-item" :style="{opacity:groupVal >=  0 &&  groupVal != couponIndex ? '0.5':'1'}">
          <image class="coupon-item-img" :src="$getImg(`${isSelectedAll(coupon, couponIndex).imgSrc}`)"
            mode="aspectFill" @click="checkAllByGoup(coupon,couponIndex)" style="margin-right: 14rpx;" />
          <view class="coupon-item-text coupon-title ellipsis" @click="openCoupons(coupon, couponIndex)">
            {{coupon.couponName}}
          </view>
          <image class="coupon-item-img"
            :src="$getImg(`iassCashier/arrow-${openIndex == couponIndex ? 'up' : 'down'}.png`)" mode="aspectFill"
            style="margin-left: 14rpx;" @click="openCoupons(coupon, couponIndex)">
          </image>
        </view>
      </cell>
      <cell :is-label="false" :border="i == (coupon.couponList.length - 1)" v-for="(item , i) in coupon.couponList"
        :key="item.couponId" @click="checkCouponByCode(item,coupon,couponIndex)" v-show="openIndex == couponIndex">
        <view class="coupon-item" :style="{opacity:groupVal >= 0 &&  groupVal != couponIndex ? '0.5':'1'}">
          <image class="coupon-item-img"
            :src="$getImg(`iassCashier/${checkedList.includes(item.couponId) ? 'checked' : 'check'}.png`)"
            mode="aspectFill" style="margin-right: 14rpx;" />
          <view class="coupon-item-text coupon-title ellipsis">￥{{item.couponFaceValue}} 券码：{{item.couponId}}</view>
        </view>
      </cell>
    </view>
  </view>
</template>
<script>
  import Cell from './Cell.vue';
  import {
    getPhoneNumber
  } from "../api/pay.js";
  import {
    checkType,
    isEmpty,
    debounce,
    getAuthCode
  } from "@/common/util.js";
  export default {
    components: {
      Cell
    },
    data() {
      return {
        checkedList: [],
        groupVal: -1,
        openIndex: -1,
      };
    },
    props: {
      coupons: {
        type: Array,
        default: () => [] // 优惠券列表
      },
      shop: {
        type: Object,
        default: () => {} // 码牌店铺信息
      },
      allDisabled: {
        type: Boolean,
        default: true
      },
      codeId: {
        type: String,
        default: ""
      }
    },
    methods: {
      // 获取手机号,查询优惠券
      async getPhone(e) {
        try {
          let {
            encryptedData,
            code,
            errMsg
          } = e.detail;
          if (errMsg.indexOf('ok') >= 0 && code) {
            let data = {
              code,
              thirdUserID: this.shop.thirdUserID,
              codeId: this.codeId
            }
            let res = await getPhoneNumber(data)
            this.$emit('getPhone', res)
          }
        } catch (e) {
          this.$toast(e.respMsg)
        }
      },
      // 全选组/取消全新选组
      checkAllByGoup(coupon, couponIndex) {
        if (!this.allDisabled) this.$toast('请输入正确支付金额')
        if ((this.groupVal >= 0 && this.groupVal != couponIndex) || !this.allDisabled) return
        let isCheckedAll = this.checkedList.length == coupon.couponList.length;
        this.checkedList = [];
        if (!isCheckedAll) {
          this.groupVal = couponIndex
          let coupons = coupon.couponList || [];
          coupons.forEach(item => {
            this.checkedList.push(item.couponId)
          })
        } else {
          this.groupVal = -1
        }
        this.$emit('change', this.checkedList)
      },
      // 展开/关闭
      openCoupons(coupon, couponIndex) {
        if (this.openIndex == couponIndex) {
          this.openIndex = -1
        } else {
          this.openIndex = couponIndex
        }
      },
      // 单选某一个
      checkCouponByCode(item, coupon, couponIndex) {
        if (!this.allDisabled) this.$toast('请输入正确支付金额')
        if ((this.groupVal >= 0 && this.groupVal != couponIndex) || !this.allDisabled) return
        let index = this.checkedList.indexOf(item.couponId);
        if (index < 0) {
          this.checkedList.push(item.couponId)
        } else {
          this.checkedList.splice(index, 1)
        }
        if (this.checkedList.length < 1) {
          this.groupVal = -1
        } else {
          this.groupVal = couponIndex
        }
        this.$emit('change', this.checkedList)
      },
      // 清除所有选中,父组件调用
      clearCheckedList() {
        this.groupVal = -1
        this.checkedList = []
        this.$emit('change', this.checkedList)
      },
      // 判断是否全选组
      isSelectedAll(coupon, couponIndex) {
        if (isEmpty(coupon)) return;
        let isCheckedAll = this.groupVal == couponIndex && this.checkedList.length == coupon.couponList.length;
        return {
          isCheckedAll,
          imgSrc: `iassCashier/${isCheckedAll ? 'checked' : 'check'}.png`
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .payment-coupons {
    .login-btn {
      background-color: transparent;
      color: #ff8545;
      font-size: 15px;
      line-height: 22px;
      height: 22px;
    }

    .margin-box {
      height: 20rpx;
      background-color: #f6f7f8;
    }

    .coupon-title {
      font-size: 30rpx;
      color: #333;
      line-height: 42rpx;

      .coupon-tip {
        color: #ccc;
      }
    }

    .coupon-item {
      width: 100%;
      display: flex;
      align-items: center;
    }

    .coupon-item-img {
      display: block;
      width: 32rpx;
      height: 32rpx;
    }

    .coupon-item-text {
      flex: 1;
      max-width: 614rpx;
    }

  }
</style>